<template>
	<view class="p30">
		<view class="border box-s-b br12 bg-white"
			style="line-height: 80rpx;padding: 20rpx;margin-top: 50rpx;font-size: 30rpx;color: #333333">
			<view>订单号：{{info.orderno}}</view>
			<view>支付时间：{{info.pay_time}}</view>
			<view>支付类型：{{info.pay_type}}</view>
			<view>卡包类型：{{info.wallet_type.name}}</view>
			<view>支付状态：{{info.status==2?'已经退款':'支付成功'}}</view>
			<view lass="d-f" style="justify-content: space-between;">
				<view> 金额：{{info.wallet_pay}}
				</view>
				<view v-if="info.wallet_type.refund_api!=null">
					<button size="mini" @click="refund()">退款</button>
				</view>
			</view>
		</view>
		<!-- 	<view class="gui-margin-top-large gui-flex gui-rows gui-justify-content-center">

			<canvas canvas-id="canvas" id="canvas" style="width:360rpx; height:360rpx;"
				></canvas>
		</view> -->
		<gui-popup ref="guipopup1">
			<view class="gui-relative gui-box-shadow gui-img-in">

				<view style="min-height: 500rpx;"
					class="gui-margin-top-large gui-flex gui-rows gui-justify-content-center gui-box-shadow gui-bg-white gui-border-radius">
					<view class="gui-border gui-border-radius gui-justify-content-center gui-flex"
						style="height: 450rpx;width:450rpx;align-items: center;background-color: #fff;">
						<canvas canvas-id="canvas" id="canvas" style="width:360rpx; height:360rpx;"></canvas>

					</view>
				</view>

			</view>

		</gui-popup>
	</view>
</template>

<script>
	import QRCode from '@/Grace6/js/qrcode.js';
	export default {
		data() {
			return {
				info: {
					wallet_type: {
						name: ''
					}
				},
				is_refund: false,
				timer1: null,
				// 二维码绘制对象
				qrcode: null,
				// 二维码尺寸，单位 rpx
				qrcodeSize: 360,
				// 二维码数据
				qrcodeContent: '',
				// 二维码背景颜色
				qrcodeBgColor: '#FFFFFF',
				// 二维码颜色
				qrcodeColor: '#000000',
				// 画布 id
				qrcodeId: 'canvas'
			}
		},
		onLoad(opt) {
			this.getorder(opt.id);
		},
		methods: {
			getorder(id) {
				let self = this;
				self.$boya.Request({
					url: '/order/info',
					data: {
						"id": id,
					},
				}, function(res) {
					console.log("info：", res.data);
					self.info = res.data;
				}, false)

			},
			open1: function() {
				this.$refs.guipopup1.open();
			},
			close1: function() {
				this.$refs.guipopup1.close();
			},
			refund() {

				let self = this;


				if (this.info.wallet_type.refund_api) {
					uni.showLoading({
						mask: true,
						title: "加载中.."
					})
					let self = this;

					self.$boya.Request({
						url: this.info.wallet_type.refund_api,
						data: {
							"id": this.info.id,
							"type": "refund_api",
						},
						method: 'get'
					}, function(res) {
						if (res.data.type == "qrcode") {
							self.qrcodeContent = res.data.code;
							self.show_qrcode()
						}
					}, false)

				}
			},
			show_qrcode(text) {
				this.open1();
				let self = this;
				setTimeout(function() {
					self.qrcode = new QRCode(self.qrcodeId, {
						text: self.qrcodeContent,
						width: uni.upx2px(self.qrcodeSize),
						height: uni.upx2px(self.qrcodeSize),
						colorDark: self.qrcodeColor,
						colorLight: self.qrcodeBgColor
					});
					uni.hideLoading();

				}, 200);

			}

		}
	}
</script>

<style>

</style>